<template>
	<view class="detail">
		<view class="fixed-bg" :style="{ 'background-image': 'url(' + songDetail.al.picUrl + ')' }"></view>

		<music-head :title="songDetail.name" :showIcon="true" fontColor="white" :top="menuButtonInfo.top"></music-head>

		<view class="scroll-box">
			<scroll-view scroll-y="true">
				<view class="detail-paly" @tap="playMusic">
					<image :src="songDetail.al.picUrl" :class="{ 'play-run': isPlayRotate }"></image>
					<text class="iconfont" :class="iconPlay"></text>
					<view class="circle"></view>
					<view class="discContainer" :class="{ needleRoutate: isPlayRotate }"></view>
				</view>

				<view class="detail-lyric">
					<view class="lyric-wrap" :style="{ transform: 'translateY(' + -(lyricIndex - 1) * 82 + 'rpx)' }">
						<view class="lyric-item" :class="{ active: lyricIndex == index }" v-for="(item, index) in songLyric" :key="index">{{ item.lyric }}</view>
					</view>
				</view>

				<view class="detail-like">
					<view class="like-head">喜欢这首歌的人也听</view>
					<view class="like-item" v-for="(item, index) in simiSongList" :key="item.id" @tap="simiSongPlay(item.id)">
						<view class="like-img"><image :src="item.album.picUrl" mode=""></image></view>
						<view class="like-song">
							<view>{{ item.name }}</view>
							<view>
								<image v-if="privileges.flag > 60 && privileges.flag < 70" src="../../static/dujia.png" mode=""></image>
								<image v-if="privileges.maxbr == 999000" src="../../static/sq.png" mode=""></image>
								<text v-for="(itm, idx) in item.artists" :key="itm.id">{{ itm.name }}{{ idx + 1 === item.artists.length ? ' ' : ' / ' }}</text>
								<text>- {{ item.name }}</text>
							</view>
						</view>
						<text class="iconfont iconbofang bofangIcon"></text>
					</view>
				</view>

				<view class="detail-comment">
					<view class="comment-head">
						<text>评论区</text>
						<view class="comment-type">
							<text :class="[commentTypeIsHot ? 'type-active' : '']" @tap="toggleCommentType('hot')">最热</text>
							<text class="splice">|</text>
							<text :class="[commentTypeIsHot ? '' : 'type-active']" @tap="toggleCommentType('new')">最新</text>
						</view>
					</view>
					<view class="comment-item" v-for="(item, index) in comments" :key="item.commentId">
						<view class="comment-img"><image :src="item.user.avatarUrl" v-if="item.user.avatarUrl"></image></view>
						<view class="comment-content">
							<view class="comment-title">
								<view class="comment-name">
									<view>{{ item.user.nickname }}</view>
									<view>{{ item.timeStr }}</view>
								</view>
								<view class="comment-like">
									{{ item.likedCount | formatNum }}
									<text class="iconfont iconlike"></text>
								</view>
							</view>
							<view class="comment-text">{{ item.content }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import musicHead from '@/components/music_head/music_head.vue';
import { getMusicDetail, getSimiSong, getSongLyric, getSongComment, getMusicUrl } from '@/common/api.js';
export default {
	components: {
		musicHead
	},
	data() {
		return {
			// 歌曲id
			songId: null,
			// 歌曲详情
			songDetail: {
				al: {
					picUrl: ''
				}
			},
			// 相似歌曲
			simiSongList: [],
			// 独家/SQ
			privileges: [],
			// 评论
			comments: [],
			// 评论类型
			commentTypeIsHot: true,
			// 歌词
			songLyric: [],
			// 歌词选中
			lyricIndex: 0,
			// 背景音乐实例
			bgAudioMannager: null,
			// 播放/暂停图标
			iconPlay: 'iconpause',
			// 胶带是否旋转
			isPlayRotate: true,
			// 歌词滚动定时器
			timer: null,
			// 微信小程序胶囊按钮信息
			menuButtonInfo: {
				top: 20
			}
		};
	},
	onLoad(options) {
		console.log(options);
		this.songId = options.songId;
		this.getMusic(options.songId);
		// #ifdef MP-WEIXIN
		/* 获取微信小程序胶囊按钮信息 */
		this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		// #endif
	},
	onUnload() {
		// #ifdef H5
		this.bgAudioMannager.destroy();
		// #endif
	},
	onHide() {
		// #ifdef H5
		this.bgAudioMannager.destroy();
		// #endif
	},
	methods: {
		/* 获取页面数据 */
		getMusic(id) {
			// 提交当前歌曲id，获得下一首歌曲id
			this.$store.commit('get_next_id', id);

			Promise.all([getMusicDetail(id), getSimiSong(id), getSongComment(id), getSongLyric(id), getMusicUrl(id)]).then(res => {
				console.log('all', res);
				if (res[0][1].data.code === 200) {
					this.songDetail = res[0][1].data.songs[0];
					this.privileges = res[0][1].data.privileges[0];
					console.log('歌曲详情', this.songDetail);
				}
				if (res[1][1].data.code === 200) {
					this.simiSongList = res[1][1].data.songs;
					console.log('相似歌曲', this.simiSongList);
				}
				if (res[2][1].data.code === 200) {
					this.comments = res[2][1].data.hotComments;
					console.log('评论', res[2][1].data);
				}
				if (res[3][1].data.code === 200) {
					console.log('歌词', res[3][1].data);
					let lyric = res[3][1].data.lrc.lyric;
					let result = [];
					let re = /\[([^\]]+)\]([^[]+)/g;
					lyric.replace(re, ($0, $1, $2) => {
						result.push({ time: this.formatTimeToSec($1), lyric: $2 });
					});
					this.songLyric = result;
				}
				if (res[4][1].data.code === 200) {
					// this.songUrl = res[2][1].data.hotComments;

					// #ifdef MP-WEIXIN
					this.bgAudioMannager = uni.getBackgroundAudioManager();
					this.bgAudioMannager.title = this.songDetail.name;
					this.listenLyricIndex(this.lyricPosition, 200);
					// #endif

					// #ifdef H5
					if (!this.bgAudioMannager) {
						this.bgAudioMannager = uni.createInnerAudioContext();
					}
					this.iconPlay = 'iconbofang';
					this.isPlayRotate = false;
					// #endif

					this.bgAudioMannager.src = res[4][1].data.data[0].url;
					if (!res[4][1].data.data[0].url) {
						uni.showToast({
							title: '暂不能播放'
						});
						uni.navigateBack();
					}
					this.bgMusicChangeHandle();
				}
			});
		},
		/* 背景音乐播放暂停与结束时触发的事件 */
		bgMusicChangeHandle() {
			this.bgAudioMannager.onPlay(() => {
				this.iconPlay = 'iconpause';
				this.isPlayRotate = true;
				this.listenLyricIndex(this.lyricPosition, 200);
			});
			this.bgAudioMannager.onPause(() => {
				this.iconPlay = 'iconbofang';
				this.isPlayRotate = false;
				clearTimeout(this.timer);
				this.timer = null;
			});
			// 歌曲播放结束
			this.bgAudioMannager.onEnded(() => {
				console.log('歌曲播放结束');
				clearTimeout(this.timer);
				this.timer = null;
				this.getMusic(this.$store.state.nextId);
			});
		},
		/* 播放暂停音乐 */
		playMusic() {
			console.log('播放/暂停');
			if (this.bgAudioMannager.paused) {
				this.bgAudioMannager.play();
			} else {
				this.bgAudioMannager.pause();
			}
		},
		/* 格式化歌词时间 */
		formatTimeToSec(time) {
			let arr = time.split(':');
			return (parseFloat(arr[0]) * 60 + parseFloat(arr[1])).toFixed(2);
		},
		/* 切换评论类型 */
		toggleCommentType(type) {
			switch (type) {
				case 'hot':
					this.commentTypeIsHot = true;
					getSongComment(this.songId).then(res => {
						// console.log(res);
						this.comments = res[1].data.hotComments;
					});
					break;
				case 'new':
					this.commentTypeIsHot = false;
					getSongComment(this.songId).then(res => {
						this.comments = res[1].data.comments;
					});
					break;
				default:
					getSongComment(this.songId).then(res => {
						this.comments = res[1].data.hotComments;
					});
					break;
			}
		},
		/* 监听歌词滚动方法   使用settimeout替换interval, 因为interval运行太久很卡 */
		listenLyricIndex(callback, n) {
			this.timer = setTimeout(() => {
				clearTimeout(this.timer);
				this.timer = null;
				callback();
				return this.listenLyricIndex(callback, n);
			}, n);
		},
		/* 歌词位置 */
		lyricPosition() {
			for (let i = 0; i < this.songLyric.length; i++) {
				if (this.bgAudioMannager.currentTime > this.songLyric[this.songLyric.length - 1].time) {
					this.lyricIndex = this.songLyric.length - 1;
					break;
				}
				if (this.bgAudioMannager.currentTime > this.songLyric[i].time && this.bgAudioMannager.currentTime < this.songLyric[i + 1].time) {
					this.lyricIndex = i;
					break;
				}
			}
		},
		/* 相似歌曲播放 */
		simiSongPlay(id) {
			let waitPlayListId = this.simiSongList.map(item => {
				return { id: item.id };
			});
			this.$store.commit('init_topListIds', waitPlayListId);
			console.log('相似id', waitPlayListId);
			this.getMusic(id);
		}
	}
};
</script>

<style lang="scss" scoped>
@keyframes move {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.detail-paly {
	width: 580rpx;
	height: 580rpx;
	background-image: url(~@/static/disc.png);
	background-size: cover;
	margin: 214rpx auto 0;
	position: relative;
	image {
		position: absolute;
		width: 370rpx;
		height: 370rpx;
		border-radius: 50%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		animation: 10s linear move infinite;
		animation-play-state: paused;
	}

	.play-run {
		animation-play-state: running;
	}

	text {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		font-size: 100rpx;
		color: white;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.circle {
		width: 66rpx;
		height: 66rpx;
		position: absolute;
		left: 0rpx;
		right: 6rpx;
		top: -216rpx;
		margin: auto;
		border-radius: 50%;
		background: #fff;
		z-index: 10;
	}

	.discContainer {
		width: 220rpx;
		height: 360rpx;
		background-image: url(~@/static/needle.png);
		position: absolute;
		left: 116rpx;
		right: 0;
		top: -200rpx;
		margin: auto;
		background-size: cover;
		transform-origin: 40rpx 0;
		transform: rotate(-20deg);
		transition: transform 0.8s;
	}

	.needleRoutate {
		transform: rotate(0deg);
	}
}

.detail-lyric {
	font-size: 32rpx;
	line-height: 82rpx;
	height: 246rpx;
	text-align: center;
	overflow: hidden;
	color: #919199;
	.lyric-wrap {
		transition: 0.5s;
	}

	.lyric-item {
		height: 82rpx;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.active {
		color: white;
		transform: scale(1.1);
	}
}

.detail-like {
	margin: 0 30rpx;
	.like-head {
		font-size: 36rpx;
		color: white;
		margin: 50rpx 0;
	}

	.like-item {
		display: flex;
		align-items: center;
		margin-bottom: 28rpx;
		.like-img {
			width: 82rpx;
			height: 82rpx;
			border-radius: 10rpx;
			overflow: hidden;
			margin-right: 20rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.like-song {
			flex: 1;
			color: #c6c2bf;
			view:nth-child(1) {
				font-size: 28rpx;
				color: white;
				margin-bottom: 12rpx;
			}

			view:nth-child(2) {
				width: 70vw;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				image {
					width: 26rpx;
					height: 20rpx;
					margin-right: 10rpx;
				}
				text {
					font-size: 22rpx;
					color: #c6c2bf;
				}
			}
		}
		text {
			font-size: 50rpx;
		}
	}
}

.detail-comment {
	margin: 0 30rpx;
	.comment-head {
		font-size: 36rpx;
		color: white;
		margin: 50rpx 0;
		display: flex;
		justify-content: space-between;
		.comment-type {
			font-size: 26rpx;
			color: #cbcacf;
			.type-active {
				color: #ffffff;
			}
			.splice {
				padding: 0 10rpx;
			}
		}
	}

	.comment-item {
		display: flex;
		margin-bottom: 28rpx;
		.comment-img {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 18rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.comment-content {
			flex: 1;
			color: #cbcacf;
			.comment-title {
				display: flex;
				justify-content: space-between;
			}

			.comment-name {
				view:nth-child(1) {
					font-size: 26rpx;
				}
				view:nth-child(2) {
					font-size: 20rpx;
				}
			}

			.comment-like {
				font-size: 28rpx;
				text {
					margin-left: 4rpx;
				}
			}

			.comment-text {
				font-size: 28rpx;
				line-height: 40rpx;
				color: white;
				margin-top: 20rpx;
				border-bottom: 1rpx solid #a3a3a3;
				padding-bottom: 30rpx;
			}
		}
	}
}
</style>
